import React, { createRef, PureComponent } from 'react';
import DocumentTitle from 'react-document-title'

import request from '@service'

import { MyBillStyle } from './style'
import BetterScroll from 'components/betterScroll'
import { store } from '@store';
import { EmptyData } from '@common';
import { getTime } from '@/utils';
import { LoadingMore } from 'components/loading'
import { Toast } from 'antd-mobile';




const BillItem = props => {
  const { item, index } = props
  return (
    <div className="bill-item flex-row"
      style={index === 0 ? { marginTop: '0px' } : {}}
    >
      <div className="left">
        <img src={item.gimg} alt="" />
      </div>
      <div className="center">
        <div className="content flex-column">
          <p>{item.name}</p>
          <span>{getTime(item.time)}</span>
        </div>
      </div>
      <div className="right" style={item.type === '退款' ? { color: '#EA0000' } : {}}>
        {item.bill}
      </div>
    </div>
  )
}

class MyBill extends PureComponent {

  uniacid = store.getState().appConfig.uniacid


  state = {
    billData: [],
    isBill: true
  }
  billBt = createRef();

  config = {
    action: 'my_check',
    uniacid: this.uniacid,
    page: -1,
    page_num: 10
  }

  render() {
    const { billData, isBill } = this.state
    return (
      <>
        <DocumentTitle title={this.props.route.title} />
        {

          //   <div className="main">
          <BetterScroll isLoadMore={isBill} loadMore={e => { this.loadMoreBill() }} ref={this.billBt} style={{ height: ' calc( 100vh - 0px ) ', top: '.32rem' }} >
            <MyBillStyle>
              {
                billData.length > 0 &&

                billData.map((item, key) => {
                  return (
                    <BillItem key={key + item.good.gimg} item={item.good} index={key} />
                  )
                })
              }

              {

                billData.length > 8 &&
                <LoadingMore isLoading={isBill} />
              }

              {
                billData.length === 0 && <EmptyData who="暂无账单记录" />
              }

            </MyBillStyle>

          </BetterScroll>

          //   </div>

        }
      </>
    );
  }

  componentDidMount() {
    this.getBillList()
  }

  async getBillList() {

    this.config.page += 1

    let res = await request({ data: this.config })

    console.log('下一页数据', res.data.length)

    if (res.status === 200) {
      if (res.data.length !== 0) {
        this.setState({
          billData: [...this.state.billData, ...res.data]
        }, () => {
          this.billBt.current.BScroll.refresh();
          this.billBt.current.BScroll.finishPullUp();

        })
      } else {
        this.setState({
          isBill: false
        }, () => {
          try {
            this.billBt.current.BScroll.refresh();
            this.billBt.current.BScroll.finishPullUp();

          } catch (error) {

          }
        })
      }
    } else if (res.status === 400) {

      this.setState({
        isBill: false
      }, () => {
        try {
          this.billBt.current.BScroll.refresh();
          this.billBt.current.BScroll.finishPullUp();

        } catch (error) {

        }
      })


    }
    else {
      Toast.info('网络错误', 1)
    }




  }


  loadMoreBill() {

    this.getBillList()

  }

}

export default MyBill;